<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      :ellipsis="false"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/home">home</el-menu-item>
      <el-sub-menu index="2">
        <template #title>Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="/news" style="width: 200px">news</el-menu-item>
      <el-menu-item index="/grammar">grammar</el-menu-item>
      <el-menu-item index="/css">css</el-menu-item>
      <span style="display: inline-flex; flex: 1"></span>
      <el-menu-item index="/mine">我的工作台</el-menu-item>
    </el-menu>
    <router-view v-slot="{ Component }" >
      <transition appear
        enter-active-class="animate__animated animate__bounceInRight animate__delay-1s"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <component :is="Component"/>
      </transition>
    </router-view>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import { ref } from "vue";
const activeIndex = ref("/");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const router = useRouter();
// 加载出来就可以监听到
onMounted(() => {
  let routerPath = router.currentRoute.value.path.includes('/mine')?'/mine':router.currentRoute.value.path
  activeIndex.value = routerPath //router.currentRoute.value.path;
  console.log("router:", router.currentRoute.value);
});
// 发生变化才可以监听到
onBeforeRouteUpdate((to) => {
  let routerPath = to.path.includes('/mine')?'/mine':to.path
  activeIndex.value = routerPath;
  console.log("ssdsdsdsd", to);
});
</script>
<style scoped>
.el-menu-item {
  min-width: 200px;
}
</style>
